<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <input type="text" v-abs>
    <p v-pin:[content]="val">距离顶部200px</p>
    <button @click="tops">移动</button>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                val:100,
                content:'left',
            }
        },
        directives:{
            abs:{
                inserted(el){
                   // console.log(el);
                    el.focus();
                }
            },
            pin:{
                //只执行一次
                bind(el,binding){
                    el.style.position = 'fixed';
                    el.style[binding.arg] = binding.value + 'px';
                },
                //添加更新后执行
                update(el,binding){
                    // el.style[binding.arg] = binding.value + 'px'; //常规写法
                    //  console.log(`${binding.value}`+'px')
                    el.style[binding.arg] = `${binding.value}px`;//模板字符串拼接写法
                },
                //清除只执行一次
                unbind(){}
            }

        },
        methods:{
            tops(){
                this.val = 200;
                this.content = 'top';
            }
        }
    })
</script>
</body>
</html>